<template>
    <div class="dashboard-container">
      <el-row type="flex" justify="end">
        <div style="margin: 10px">
          <el-button type="primary" @click="editOpen(0)">添加</el-button>
        </div>
      </el-row>
      <el-row>
        <el-col>
          <div class="app-container">
            <el-table
              :data="tableData"
              border
              fit
              highlight-current-row
              style="width: 100%"
            >
              <el-table-column prop="device_name" label="设备名">
              </el-table-column>
              <el-table-column prop="device_id" label="设备id"> </el-table-column>
              <el-table-column prop="wifi_name" label="wifi名">
              </el-table-column>
              <el-table-column align="center" label="wifi密码">
                <template slot-scope="{ row }">
                  <span>{{ row.wifi_password }}</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="{ row }">
                  <div style="display: flex; justify-content: space-between">
                    <!-- <el-button @click="editOpen(1, row)" type="text" size="small"
                      >修改</el-button
                    > -->
                    <el-popconfirm
                      :title="'确定删除这一条吗'"
                      @confirm="del(row)"
                    >
                      <el-button
                        style="margin-left: 5px"
                        slot="reference"
                        type="text"
                        size="small"
                        >删除</el-button
                      >
                    </el-popconfirm>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <!-- <Pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                            @pagination="getList" /> -->
          </div>
        </el-col>
      </el-row>
      <el-dialog
        :title="editOpenType == 0 ? '新建' : '修改'"
        :visible.sync="dialogVisible"
        width="40%"
      >
        <div>
          <el-form :inline="true" :model="formEdit" class="demo-form-inline">
            <el-form-item label="设备名">
              <el-input
                v-model="formEdit.device_name"
                placeholder="设备名"
              ></el-input>
            </el-form-item>
            <el-form-item label="设备id">
              <el-input
                v-model.number="formEdit.device_id"
                placeholder="设备id"
              ></el-input>
            </el-form-item>
            <el-form-item label="wifi名">
              <el-input
                v-model.number="formEdit.wifi_name"
                placeholder="wifi名"
              ></el-input>
            </el-form-item>
            <el-form-item label="wifi密码">
              <el-input
                v-model.number="formEdit.wifi_password"
                placeholder="wifi密码"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="edit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    name: "Dashboard",
    data() {
      return {
        tableData: [],
        search_form: {},
        dialogVisible: false,
        formEdit: { },
        editOpenType: null, // 编辑保存类型
      };
    },
    computed: {
      store_id() {
        return this.$store.state.user.regionalData.store_id;
      },
    },
    methods: {
      editOpen(type, row) {
        if (row) {
          this.formEdit = JSON.parse(JSON.stringify(row));
        }
        this.editOpenType = type;
        this.dialogVisible = true;
      },
      edit() {
        //新建编辑
        let url, message;
        if (this.editOpenType == 0) {
          url = "/add_device_api";
          message = "添加成功";
        } else {
          delete this.formEdit.store_name;
          delete this.formEdit.time;
          url = "/modify_person_api";
          message = "修改成功";
        }
        this.https(url, { ...this.formEdit, store_id: this.store_id }).then(
          (res) => {
            this.$message.success(message);
            this.dialogVisible = false;
            this.getList();
          }
        );
      },
      del(row) {
        this.https("/del_device_api", {
          store_id: row.store_id,
          device_id: row.device_id,
        }).then((res) => {
          this.$message({
            type: "success", // success error warning
            message: `删除成功`,
            duration: 2000,
          });
          this.getList();
        });
      },
  
      getList() {
        console.log(this);
        this.https("/read_device_api", { store_id: this.store_id }).then(
          (res) => {
            console.log(res);
            // res.result.forEach(item => {
            //     item.start_time = timestampToTime(item.start_time)
            // });
            this.tableData = res;
            // console.log(this.tableData, 'this.dataList')
          }
        );
      },
      search_Bth() {
        console.log(this.search_form, "search_form");
      },
    },
    created() {
      this.getList();
    },
  };
  </script>
  
  <style scoped>
  .dashboard-container {
    width: 100%;
    height: 100%;
  }
  
  .edit-input {
    padding-right: 100px;
  }
  
  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
  </style>
  